<template>
  <div class="shopContent" ref="shopContent">
    <div class="shop-content-box">
      <div class="box-width">
        <div class="detail-top" style="display: flex">
          <!-- <amplify :images="[...imgList]" :product="postData" :SKU="getSku" :videoUrl="''"></amplify> -->
          <div type="primary" class="mr20" style="position: sticky; top: 135px; height: 760px; z-index: 1">
            <amplify
              :images="videoUrl ? [videoUrl, ...imgList] : [...imgList]"
              :product="postData"
              :SKU="getSku"
              :videoUrl="videoUrl"
            ></amplify>
          </div>
          <skuContent ref="skuRef" :postData="postData"> </skuContent>
        </div>
        <div class="detail-bottom mt60">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="商品信息详情" name="first">
              <shopInfo v-if="activeName === 'first'" :postData="postData" :videoUrl="videoUrl"></shopInfo>
            </el-tab-pane>
            <el-tab-pane label="品牌信息" name="second">
              <brand v-if="activeName === 'second'" :brandId="brandId"></brand>
            </el-tab-pane>
            <el-tab-pane label="封面产品" name="three">
              <coverProduct v-if="activeName === 'three'" :postData="postData"></coverProduct>
            </el-tab-pane>
            <el-tab-pane label="设计推荐" name="four">
              <recommendDesign :postData="postData"></recommendDesign>
            </el-tab-pane>
            <el-tab-pane label="实拍图" name="five">
              <reallyImage v-if="activeName === 'five'" :postData="postData"></reallyImage>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import amplify from "./components/amplify";
import skuContent from "./components/skuContent";
import { getShopDetail } from "@/apis/shopHome/detail";
import { getProductDetail, getRichText } from "@/apis/products/specifications";

export default {
  name: "shopDetail",
  components: { amplify },
  data() {
    return {
      imgList: [],
      videoUrl: "",
      postData: {},
      SKU: {},
      brandId: "",
      activeName: "first"
    };
  },
  mounted() {
    this.getShopDetails();
  },
  computed: {},
  methods: {
    getSku() {
      return this.$refs.skuRef.getSkuObject();
    },
    getShopDetails() {
      let postData = new FormData();
      postData.append("productId", this.$route.query.id);
      getProductDetail({ productId: this.$route.query.id })
        .then(res => {
          const { data } = res;
          const imageList = data.sliderPicUrlList || [];
          this.videoUrl = data.sliderVedioUrl;
          this.imgList = imageList;
          this.postData = data || [];
          // brandId
          this.brandId = res.data.brandId;

          getRichText({ sourceId: res.data.productId, sourceType: 5 }).then(res => {
            if (res.code === 200) {
              this.postData.content = res.data.content;
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<script setup>
import { ref } from "vue";
import shopInfo from "./components/shopInfo.vue";
import coverProduct from "./components/coverProduct.vue";
import reallyImage from "./components/reallyImage.vue";
import brand from "./components/brand.vue";
import recommendDesign from "./components/recommendDesign.vue";

const activeName = ref("first");
</script>

<style lang="scss" scoped>
.shopContent {
  height: calc(100% - 40px);
  overflow-y: auto;
  padding: 20px;
  .shop-content-box {
    background-color: white;
  }
}
</style>
